<template>
  <div id="zlh-main-box">
    <div class="zlh-default-background-color" style="padding: 1.5rem;">
      <el-space direction="vertical" alignment="left" size="large">
        <div>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }"> <el-icon><House /></el-icon></el-breadcrumb-item>
            <el-breadcrumb-item>首页</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div>
          <el-descriptions title="工作台">
            <el-descriptions-item>欢迎：<span style="color: red;font-weight:bold">Zlhranhou</span></el-descriptions-item>
            <el-descriptions-item>祝您开心每一天！</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-space>
    </div>
    <div class="zlh-flex-js-ac">
      <div style="width: 50%">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>日历</span>
              <CalendarToolsBox></CalendarToolsBox>
            </div>
          </template>
        </el-card>
      </div>
      <div style="width: 50%">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>最近消息</span>
            </div>
          </template>
          <div class="demo-collapse">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="兰博发来一条消息" name="1">
                <div>
                  2022-08-30
                </div>
                <div>
                  兰博说今天的猫罐头很不错哦~
                </div>
              </el-collapse-item>
              <el-collapse-item title="Feedback" name="2">
                <div>
                  Operation feedback: enable the users to clearly perceive their
                  operations by style updates and interactive effects;
                </div>
                <div>
                  Visual feedback: reflect current state by updating or rearranging
                  elements of the page.
                </div>
              </el-collapse-item>
              <el-collapse-item title="Efficiency" name="3">
                <div>
                  Simplify the process: keep operating process simple and intuitive;
                </div>
                <div>
                  Definite and clear: enunciate your intentions clearly so that the
                  users can quickly understand and make decisions;
                </div>
                <div>
                  Easy to identify: the interface should be straightforward, which helps
                  the users to identify and frees them from memorizing and recalling.
                </div>
              </el-collapse-item>
              <el-collapse-item title="Controllability" name="4">
                <div>
                  Decision making: giving advices about operations is acceptable, but do
                  not make decisions for the users;
                </div>
                <div>
                  Controlled consequences: users should be granted the freedom to
                  operate, including canceling, aborting or terminating current
                  operation.
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import CalendarToolsBox from "@/components/Tools/CalendarToolsBox.vue";
export default {
  name: "IndexBox",
  components:{
    CalendarToolsBox
  }
}
</script>

<script lang="ts" setup>
import {
  House,
} from '@element-plus/icons-vue'
import { ref } from 'vue'

const activeNames = ref([])
const handleChange = (val: string[]) => {
  console.log(val)
}
</script>



<style scoped>

</style>
